<template>
  <div class="mine">
    <Heads types="user" title="我的"></Heads>

    <hy-union :userinfo="userinfo" :token="token"></hy-union>
    <!-- 会员卡下拉 -->
    <div
      class="cover-container"
      :style="[{
						transform: coverTransform,
						transition: coverTransition
					}]"
      @touchstart="coverTouchstart"
      @touchmove="coverTouchmove"
      @touchend="coverTouchend"
    >
      <!-- 覆盖在会员卡上的组件 -->
      <hy-cover :userinfo="userinfo"></hy-cover>
      <!-- 订单 -->
      <!-- <UniUserOrder :userinfo="userinfo"></UniUserOrder> -->
      <!-- 浏览历史 -->
      <!-- <UniUserHistory :userinfo="userinfo"></UniUserHistory> -->
      <!-- <Uploadavatar></Uploadavatar> -->
      <!-- <router-view></router-view> -->
      <van-grid>
        <van-grid-item icon="bag-o" text="全部" :to="{name: 'User-order', params: {type: 'all'}}" />
        <van-grid-item
          icon="logistics"
          text="待收货"
          :to="{name: 'User-order', params: {type: 'toreceived'}}"
        />
        <van-grid-item
          icon="cashier-o"
          text="待评价"
          :to="{name: 'User-order', params: {type: 'topaid'}}"
        />
        <van-grid-item
          icon="flower-o"
          text="评价"
          :to="{name: 'User-order', params: {type: 'evaluate'}}"
        />
      </van-grid>

      <van-cell-group class="menu-cell">
        <van-cell title="我的积分" :value="1000" center is-link>
          <template #icon>
            <van-icon class="margin-r-10" name="comment-circle-o" color="#ee6761" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="menu-cell">
        <van-cell title="消息通知" center is-link :to="{name: 'Notice'}">
          <template #icon>
            <van-icon class="margin-r-10" name="comment-circle-o" color="#ee6761" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="menu-cell">
        <van-cell title="我的地址" center is-link :to="{name: 'Address-list'}">
          <template #icon>
            <van-icon class="margin-r-10" name="edit" color="#ee6761" />
          </template>
        </van-cell>
      </van-cell-group>
      <!-- <van-cell-group class="menu-cell">
        <van-cell title="问题反馈" center is-link >
          <template #icon>
            <van-icon class="margin-r-10" name="info-o" color="#ee6761" />
          </template>
        </van-cell>
      </van-cell-group> -->
      <van-cell-group class="menu-cell">
        <van-cell title="设置" center is-link :to="{name: 'User-menu'}">
          <template #icon>
            <van-icon class="margin-r-10" name="setting-o" color="#ee6761" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapState } from "vuex";
// 局部注册
// import Uploadavatar from '@/components/Uploadavatar.vue'
import HyUnion from "@/components/user/HyUnion.vue";
import HyCover from "@/components/user/HyCover.vue";
import { Cell, CellGroup, Grid, GridItem } from "vant";

Vue.use(Cell)
  .use(CellGroup)
  .use(Grid)
  .use(GridItem);

let startY = 0;
let moveY = 0;
let pageAtTop = true;
export default {
  components: {
    HyUnion,
    HyCover
  },
  data() {
    return {
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false
    };
  },
  computed: {
    ...mapState("userModule", ["token", "userinfo"])
  },
  methods: {
    // ...mapMutations(['changeSlider']),
    /**
     *  会员卡下拉和回弹
     *  1.关闭bounce避免ios端下拉冲突
     *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
     *    transition设置0.1秒延迟，让css来过渡这段空窗期
     *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
     */
    coverTouchstart(e) {
      if (pageAtTop === false) {
        return;
      }
      this.coverTransition = "transform .1s linear";
      startY = e.touches[0].clientY;
    },
    coverTouchmove(e) {
      moveY = e.touches[0].clientY;
      let moveDistance = moveY - startY;
      if (moveDistance < 0) {
        this.moving = false;
        return;
      }
      this.moving = true;
      if (moveDistance >= 60 && moveDistance < 80) {
        moveDistance = 60;
      }

      if (moveDistance > 0 && moveDistance <= 80) {
        this.coverTransform = `translateY(${moveDistance}px)`;
      }
    },
    coverTouchend() {
      if (this.moving === false) {
        return;
      }
      this.moving = false;
      this.coverTransition = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
      this.coverTransform = "translateY(0px)";
    }
  }
};
</script>

<style lang='scss' scoped>
.cover-container {
  margin-top: -110px;
  padding: 0 15px;
  position: relative;
  background: #f5f5f5;
  padding-bottom: 10px;
}
.menu-cell {
  margin-top: 8px;
  text-align: left;
  .margin-r-10 {
    margin-right: 10px;
  }
}
</style>
